<template>
    <div>
        <mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore">
            <ul class="mui-table-view">
                <li class="mui-table-view-cell mui-media" v-for="item in list.slice(0,10)" :key="item.title">
                    <a @click="detail(item.id)">
                        <img class="mui-media-object mui-pull-left" :src="img">
                        <div class="mui-media-body" v-if="item.artists">
                            {{item.name}}
                            <p class='mui-ellipsis'>{{item.artists[0].name}}</p>
                            <p class='time'>
                                <span>发表时间：{{item.album.publishTime | dateFormat('YYYY-MM-DD')}}</span>
                                <span>点击：0</span>
                            </p>
                        </div>
                    </a>
                </li>
            </ul>
        </mt-loadmore>
    </div>
</template>

<script>


export default {
    data(){
        return {
            msg: '我是新闻组件',
            img: '../../images/news/shuijiao.jpg',
            list: [
                {
                    id: '',
                    img: '../../images/news/shuijiao.jpg',
                    title: '幸福',
                    brief: '能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？'
                },{
                    id: '',
                    img: '../../images/news/muwu.jpg',
                    title: '木屋',
                    brief: '想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖.'
                },{
                    id: '',
                    img: '../../images/news/cbd.jpg',
                    title: 'CBD',
                    brief: '烤炉模式的城，到黄昏，如同打翻的调色盘一般.'
                },
            ],
            allLoaded: false
        }
    },
    created(){
        this.init()
        this.$toast('提示信息');
    },
    mounted(){
        
    },
    methods:{
        init(){
            this.$http.get("search?keywords=悲伤").then(result => {
                console.log(JSON.stringify(result.body.result.songs[0]))
                this.list = result.body.result.songs

                //新数据拼接上前面的数据
                // this.list = this.list.concat(result.body.result.songs)
            })
        },
        detail(id){
            console.log(id)
            this.$router.push('/home/newsDetail/'+id)
        },
        loadTop() {
        console.log(1)// 加载更多数据
        
        this.$refs.loadmore.onTopLoaded();
        },
        loadBottom() {
            console.log(2)// 加载更多数据
            this.allLoaded = true;// 若数据已全部获取完毕
            this.$refs.loadmore.onBottomLoaded();
        }
    }
}
</script>

<style lang="scss" scoped>
 a{
    text-decoration: none;
}
.time{
    font-size: 12px;
    color: #226aff;
    display: flex;
    justify-content: space-between;//内容两端对齐
}
</style>